<!-- MessageList.vue 消息列表组件 -->
<template>
	<div class="message-list" ref="scrollContainer">
		<MessageItem
			v-for="message in messages"
			:key="message.id"
			:message="message"
			:current-user="currentUser"
			:target-user="targetUser"
		/>
		<p v-show="messages.length === 0" class="empty-message">
			<i class="iconfont icon-queshengye_zanwuxiaoxi"></i>
			<span>对话记录出逃了~</span>
		</p>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import MessageItem from './MessageItem.vue'

	const props = defineProps({
		messages: { type: Array, required: true },
		currentUser: { type: Object, required: true },
		targetUser: { type: Object, required: true }
	})

	const scrollContainer = ref(null)
</script>

<style scoped>
	.message-list {
		flex: 1;
		overflow-y: auto;
		padding: 10px;
		background: #f3f3f3;
		.empty-message {
			flex: 1;
			height: 95%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.icon-queshengye_zanwuxiaoxi {
				font-size: 64px;
			}
			span {
				font-size: 14px;
				color: #999;
			}
		}
	}
</style>
